<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#demo {
				background: #999;
			}
		</style>
	</head>
	<body>
		<div id="demo" style="width: 100px;height: 100px;border: 1px solid;">
			
		</div>
	</body>
</html>

<script type="text/javascript">
	var demo = document.getElementById('demo');
	// demo.style.xxx只能获取行内样式 => 获取demo标签的宽度
	console.log('width', demo.style.width);
	// 背景颜色不是行内设置的,所以获取不到 => 获取demo标签的背景颜色
	console.log('backgroundColor:', demo.style.backgroundColor);
	// 需要通过window.getComputedStyle来获取 => 获取demo标签的背景颜色
	var style = getComputedStyle(demo);
	console.log(style.backgroundColor);
	// 设置样式 => 设置demo标签的背景颜色为红色
	demo.style.backgroundColor = 'red';
	
</script>
